import { Component, OnInit, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { NzMessageService, NzModalService, UploadFile } from 'ng-zorro-antd';
import { STData } from '@delon/abc';
import { ApiService } from '@core/services/api';
import { isNull } from 'util';
import { Operator, DoorProductorDic } from '@core/config/dic.config';

@Component({
  selector: 'app-offline-list-module',
  templateUrl: './offline-list.component.html',
  styleUrls: ['./index.less']
})
export class OfflineListModuleComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  // 弹窗
  isVisible = false;
  // 文件
  selectedFile: File;
  // 已选数据
  selectData: any[];

  // 配置表格
  config: SPage = {
    columns: [
      {
        index: 'id',
        title: '多选',
        type: ColumnType.checkbox,
      },
      /*{
        index: 'deviceIp',
        title: '点位IP',
        filter: {
          placeholder: '点位IP',
          type: 'string'
        }
      },*/
      {
        index: 'deviceName',
        title: '设备姓名',
        filter: {
          placeholder: '设备姓名',
          type: 'string'
        }
      },
      {
        index: 'areaName',
        title: '所属村',
        filter: {
          placeholder: '请输入村庄',
          type: 'string',
        },
      },
      {
        index: 'houseAddr',
        title: '楼栋地址',
        filter: {
          placeholder: '楼栋地址',
          type: 'string'
        }
      },
      {
        index: 'doorName',
        title: '门名称',
        filter: {
          hideSearch: true,
          placeholder: '门名称',
          type: 'string'
        }
      },
      {
        index: 'facCode',
        title: '厂家',
        filter: {
          placeholder: '请选择厂家',
          type: 'select',
          hideSearch: true,
          items: DoorProductorDic
        }
      },
      {
        index: 'deviceCode',
        title: '设备ID',
        filter: {
          placeholder: '设备ID',
          type: 'string'
        }
      },
      {
        index: 'deviceOperator',
        title: '所属运营商',
        filter: {
          placeholder: '请选择运营商',
          type: 'select',
          items: Operator
        }
      },
      {
        index: 'offTime',
        title: '离线时间',
        /*filter: {
          placeholder: '请选择离线时间',
          type: 'date'
        }*/
      },
      {
        index: 'offHour',
        title: '离线总时长',
        /*filter: {
          placeholder: '离线总时长',
          type: 'string'
        }*/
      },
      {
        index: 'auditStatus',
        title: '审核状态',
        type: ColumnType.tag,
        tag: {
          0: { text: '未申请', color: 'grey'},
          1: { text: '待审核', color: 'yellow' },
          2: { text: '审核通过', color: 'green' },
          3: { text: '审核不通过', color: 'red' }
        },
        filter: {
          placeholder: '请选择状态',
          type: 'select',
          items: [
            { label: '待审核', value: '0'},
            { label: '待审核', value: '1' },
            { label: '审核通过', value: '2' },
            { label: '审核不通过', value: '3' }
          ]
        }
      }
    ],
    editBtn: [
      { title: '申请减免', iif: item => {
        return item.auditStatus === 0
        } }
    ],
    showCheckBox: true,
    // data: [
    //   { name: '张三', age: '24' },
    // ],
    reqUrl: this.api.device.offLinePage.url
  }
  // 上传图片功能
  showUploadList = {
    showPreviewIcon: true,
    showRemoveIcon: true,
    hidePreviewIconInNonImage: true
  };
  fileList: any = [];
  previewImage: string | undefined = '';
  previewVisible = false;
  isBatch = false;
  constructor(private http: _HttpClient, private modal: NzModalService, private message: NzMessageService, public api: ApiService) { }

  ngOnInit() {
    // of(
    //   Array(100)
    //     .fill({})
    //     .map((_item: any, idx: number) => {
    //       return {
    //         id: idx + 1,
    //         facilityName: `设备名称 ${idx + 1}`,
    //         ssyys: (Math.floor(Math.random() * 2) + 1) === 1 ? '天威' : '移动',
    //         status: Math.floor(Math.random() * 3)
    //       };
    //     }),
    // )
    //   .pipe(delay(500))
    //   .subscribe(res => (this.config.data = res));
  }
  // 单条申请减免

  operate(e): void {
    this.fileList = [];
    if (e.title === '申请减免' && e.data.auditStatus === 0) {
      this.selectData = [e.data];
      this.isVisible = true;
    } else {
      this.message.error('此信息不能申请减免');
    }
  }
  selectFile(file: FileList): void {
    if (file && file.length > 0) {
      this.selectedFile = file[0];
    }
  }
  handleOk(): void {
    let filePath = ''
    console.log(this.fileList)
    this.fileList.forEach(item => {
      if (!!item.response) {
        filePath += item.response.data + ';';
      }
    });
    if (filePath.length === 0) {
      this.message.error('请上传附件!');
      return;
    }
    const body: any[] = [];
    this.selectData.forEach(item => {
      body.push({
        id: item.id,
        auditStatus: 1,
        enclosure: filePath
      })
    })
    this.http.request<any>(this.api.assess.applyReductionBatch.method, this.api.assess.applyReductionBatch.url, {body}).subscribe(res =>{
      if (res.status === '200' || res.status === '201') {
        this.message.success('提交申请成功');
        this.isVisible = false;
        this.st.reload();
      }
    })
  }
  // 导出数据
  _console(e) {
  }
  // 选择数据
  selectChange(e) {
    this.selectData = e;
  }
  // 根据状态检索不需要被全选的数据
  dataProcess(data: STData[]) {
    return data.map((i: STData, index: number) => {
      i.disabled =  i.auditStatus !== 0;
      return i;
    });
  }

  // 批量申请减免
  batchApply() {
    this.fileList = [];
    if (!this.selectData || this.selectData.length === 0) {
      this.message.warning('请选择数据后操作');
      return;
    }
    this.isVisible = true;
  }
  // 预览图片功能
  handlePreview = (file: UploadFile) => {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
  };
  uploadFile = (file: File) => {
    return {
      fileType: 2,
      functionType: 4,
      file
    }
  }
}

